<template>
	<view>
		<TopNav title="收货地址" bg-color="#fff"></TopNav>
		<view class="main">
			<view class="bg-white radius p-tb16 p-lr16 flex align-center m-b10" v-for="(item,index) in list"
				:key="item.id">
				<view class="" @click="handleSelect(item.id,index)">
					<image src="/static/images/index/radio-check.png" class="width-20 height-20" mode=""
						v-if="radioCurrent == item.id"></image>
					<image src="/static/images/index/radio.png" class="width-20 height-20 shrink-0" mode="" v-else>
					</image>
				</view>
				<view class="flex-1 p-lr10 f-s16">
					<view class="flex">
						<text class="f-s16 f-w600">{{item.realname}}</text>
						<text class="p-l8">{{item.mobile}}</text>
						<u-tag text="默认" bgColor="#FE3F59" borderColor="#FE3F59" size="mini" shape="circle" class="m-l6"
							v-if="item.is_default==1"></u-tag>
					</view>
					<view class="m-t8">
						<text>{{item.province}}{{item.city}}{{item.district}}{{item.address}}</text>
					</view>
				</view>
				<image src="/static/images/mine/menu/shopping/edit.png" class="width-20 height-20 shrink-0" mode=""
					@click="handleEditAddress(item.id)"></image>
			</view>
			<Empty :show="list.length === 0"></Empty>
		</view>

		<view class="fixed-bottom p-lr16">
			<view class="self-btn full-width " hover-class="pressed" @click="handleEditAddress('')">
				<text>新增地址</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		addressList as list
	} from "@/api/mine/shopping.js"
	import mixins from "@/mixins";
	import Empty from '@/components/empty/index.vue';
	export default {
		components: {
			Empty
		},
		mixins: [mixins],
		data() {
			return {
				radioCurrent: '',
				list: [],
				queryParams: {}
			}
		},
		onLoad(query) {
			if(query.id){
				this.radioCurrent = query.id
			}
		},
		onShow() {
			this.getList()
		},
		onReachBottom() {
			this.handleScrollBottom()
		},
		methods: {
			handleSelect(id, index) {
				if (id == this.radioCurrent) {
					this.radioCurrent = ''
				} else {
					this.radioCurrent = id
					uni.$emit('addressSelect', this.list[index])
				}
			},
			getList() {
				list(this.queryParams).then(res => {

					let {
						count,
						data
					} = res
					this.total = count
					this.list = data
					if(count===0){
						uni.$emit('addressSelect', {})
					}
				})
			},
			handleEditAddress(id = '') {
				this.$tab.navigateTo('address-edit?id=' + id)
			}
		}
	}
</script>
<style lang="scss">
	@import '@/common/css/var.scss';

	page {
		@include fixed-bottom;
	}
</style>
<style lang="scss" scoped>
	.main {
		padding: 20rpx 32rpx;
	}

	.self-btn {
		// background-color: #FE3F59;
		border-radius: 50rpx;
	}
</style>